<script setup>
import { Edit, Delete } from "@element-plus/icons-vue";
import { ref, onMounted, reactive } from "vue";
import { getProductTypeList } from "@/api/productType";
import { formatTime } from "@/utils/format";

const dialog = ref(null);
// 加载中
const loading = ref(false);
// 请求参数
const params = reactive({
  current: 1,
  size: 10,
  keyword: "",
});

// 列表数据
const typeList = ref([]);

// 列表总条数
const total = ref(0);
// 获取列表数据
const getList = async () => {
  loading.value = true;
  const res = await getProductTypeList(params);
  typeList.value = res.data.data.data;
  total.value = res.data.data.total;
  loading.value = false;
};
getList();

const handleSizeChange = (val) => {
  params.size = val;
  getList();
};
const handleCurrentChange = (val) => {
  params.current = val;
  getList();
};

// 点击添加按钮
const onAddChannel = () => {
  // 显示弹窗
  dialog.value.open({});
};
// 点击编辑按钮
const onEditChannel = (row, index) => {
  // 显示弹窗
  dialog.value.open(row);
};

// 搜索
const onSearch = () => {
  params.current = 1; // 搜索时重置到第一页
  getList();
};
// 重置
const restore = () => {
  params.keyword = "";
  params.current = 1; // 重置时回到第一页
  getList();
};
// 成功回调
const success = (e) => {
  if (e === "add") {
    // 最后一页已经满了，则跳转到最后一页+1
    if (total.value % params.size === 0) {
      params.current = Math.ceil(total.value / params.size) + 1;
    } else {
      // 跳转到最后页
      params.current = Math.ceil(total.value / params.size);
    }
  }
  getList();
};
</script>

<template>
  <Card title="农产品分类">
    <!-- 具名插槽--按钮 -->
    <template #extra>
      <el-button type="primary" @click="onAddChannel">添加分类</el-button>
    </template>

    <el-form inline style="margin-left: 20px">
      <el-form-item style="width: 300px">
        <el-input
          :prefix-icon="Search"
          v-model="params.keyword"
          clearable
          class="w-50"
          placeholder="类型名称"
          @keyup.enter="onSearch"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">搜索</el-button>
        <el-button @click="restore">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 默认插槽--表格 -->
    <el-table
      :data="typeList"
      style="width: 100%"
      v-loading="loading"
      :default-sort="[{ prop: 'createTime', order: 'descending' }]"
    >
      <el-table-column label="序列" width="100" type="index" />
      <el-table-column prop="typeName" label="类型名称" />
      <el-table-column prop="description" label="类型描述" />
      <el-table-column
        prop="status"
        label="状态"
        width="120"
        :filters="[
          { text: '正常', value: 1 },
          { text: '禁用', value: 0 },
        ]"
        :filter-method="(value, row) => row.status === value"
      >
        <template #default="{ row }">
          <el-tag v-if="row.status === 1" type="success">正常</el-tag>
          <el-tag v-if="row.status === 0" type="danger">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="150" sortable>
        <template #default="{ row }">
          {{ formatTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130">
        <template #default="{ row, $index }">
          <el-button
            :icon="Edit"
            circle
            plain
            type="primary"
            @click="onEditChannel(row, $index)"
          >
          </el-button>
        </template>
      </el-table-column>

      <!-- 空数据时 -->
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <el-pagination
      v-model:current-page="params.current"
      v-model:page-size="params.size"
      :page-sizes="[2, 3, 4, 5, 10]"
      background
      layout="jumper,total, sizes, prev, pager, next"
      :total="Number(total)"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      style="margin-top: 50px; justify-content: flex-end"
    />
  </Card>

  <!-- 弹窗 -->
  <ProductTypeEdit ref="dialog" @success="success"></ProductTypeEdit>
</template>

<style lang="scss" scoped></style>
